<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <!-- 
        主要是v-for指令
            1.v-for：
                1):和java、js中的循环很像，主要用在列表的渲染中
                2):尽量在书写的同时绑定key属性，如果不绑定key属性的话，默认使用index索引
                3):可以遍历很多种类型，比如对象、数组、对象数组、字符串等
                4):循环中的in可以换成of
     -->
    <div id="root">
        <!-- 1.遍历对象:可以写3个参数，分别是value和key和索引index -->
        <h2>汽车信息</h2>
        <ul>
            <li v-for="(value, key) in cars" :key="key">
                {{ key }}-{{ value }}
            </li>
        </ul>

        <!-- 2.遍历数组:共有2个参数分别是数组值、数组索引 -->
        <h2>测试数组</h2>
        <ul>
            <li v-for="(value, index) in arrs" >
                {{ value }}-{{ index }}
            </li>
        </ul>


        <!-- 3.遍历对象数组:第一个参数是数组中的对象,第二个参数是索引 -->
        <h2>人员列表</h2>
        <ul>
            <!-- 这里的p就是循环中的一个对象{ "id": "001", "name": "张三", "age": 18 } -->
            <!-- 下面的value值就是索引，有多个参数的时候最好写上括号 -->
            <!-- <li v-for="(p,value) in persons">   -->
            <!-- 用唯一的身份标识绑定key属性，这个标识可以是id、手机号、邮箱等 -->
            <li v-for="p in persons" :key="p.id">  
                {{ p.name }}-{{ p.age }}-{{ p.id }}
            </li>
        </ul>

        <!-- 4.遍历字符串:共有2个参数，分别是值和索引 -->
        <h2>字符串列表</h2>
        <ul>
            <li v-for="(s, index) in str">
                {{ s }}-{{ index }}
            </li>
        </ul>


    </div>

    <script>
        Vue.config.productionTip = false;

        new Vue({
            el: "#root",
            data: {
                persons: [
                    {id:'001', name:'张三', age:18},
                    {id:'002', name:'李四', age:19},
                    {id:'003', name:'王五', age:20}
                ],
                cars: {
                    name: '奥迪A8',
                    price: '70万',
                    color: '黑'
                },
                arrs: ['A', 'B', 'C'],
                str: 'Hello'
            },
            methods: {
                
            }
        })
    </script>
</body>
</html>